<template>
	<view class="office">
		<view class="office_top">
			<view style="font-weight:800;">办公</view>
			<view class="office_top_right">
				<img @click="gooffice_search" class="office1" src="/static/officeImgs/office1.png" alt="" />
				<img @click="gooffice_setup" class="office2" src="/static/officeImgs/office2.png" alt="" />
			</view>
		</view>

		<ul class="office_nav">
			<li @click="gooffice_shenpi">
				<img src="/static/officeImgs/office3.png" class="office_nav_img" alt="" />
				<view>审批管理</view>
			</li>

			<li @click="gooffice_bangong">
				<img src="/static/officeImgs/office4.png" class="office_nav_img" alt="" />
				<view>办公申请</view>
			</li>

			<li @click="gooffice_gongdan">
				<img src="/static/officeImgs/office5.png" class="office_nav_img" alt="" />
				<view>工单管理</view>
			</li>

			<li @click="gooffice_renwu">
				<img src="/static/officeImgs/office6.png" class="office_nav_img" alt="" />
				<view>任务管理</view>
			</li>

			<li @click="gooffice_richeng">
				<img src="/static/officeImgs/office3.png" class="office_nav_img" alt="" />
				<view>日程管理</view>
			</li>

			<li @click="gooffice_gongzuo">
				<img src="/static/officeImgs/office4.png" class="office_nav_img" alt="" />
				<view>工作报告</view>
			</li>

			<li @click="gooffice_xitong">
				<img src="/static/officeImgs/office5.png" class="office_nav_img" alt="" />
				<view>系统公告</view>
			</li>

			<li @click="gooffice_waiqin">
				<img src="/static/officeImgs/office6.png" class="office_nav_img" alt="" />
				<view>外勤签到</view>
			</li>

			<li @click="gooffice_wode">
				<img src="/static/officeImgs/office3.png" class="office_nav_img" alt="" />
				<view>我的考勤</view>
			</li>

			<li @click="gooffice_wendang">
				<img src="/static/officeImgs/office4.png" class="office_nav_img" alt="" />
				<view>文档管理</view>
			</li>

			<li @click="gooffice_tongxunlu">
				<img src="/static/officeImgs/office5.png" class="office_nav_img" alt="" />
				<view>通讯录</view>
			</li>

		</ul>

		<view class="office_myMisson">
			<view class="office_myMisson_top">
				<view style="font-weight: 800;margin-top: 30rpx;">我的任务</view>
				<view style="padding-right: 40rpx;font-size: 36rpx;margin-top:30rpx;">&gt;</view>
			</view>

			<ul class="office_myMisson_ul">
				<li class="office_myMisson_ul_li">
					<view class="office_myMisson_left">
						<view>2019-09-23 22:31</view>
						<view>与客户沟通报价事宜</view>
					</view>
					<view class="office_myMisson_right">
						<view style="margin-right: 60rpx;">⚪进行中</view>
					</view>
				</li>

				<li class="office_myMisson_ul_li" style="border-left: 6rpx solid yellow;">
					<view class="office_myMisson_left">
						<view>2019-09-23 22:31</view>
						<view>与客户沟通报价事宜</view>
					</view>
					<view class="office_myMisson_right">
						<view style="margin-right:60rpx;">⚪进行中</view>
					</view>
				</li>

				<li class="office_myMisson_ul_li" style="border-left: 6rpx solid blue;">
					<view class="office_myMisson_left">
						<view>2019-09-23 22:31</view>
						<view>与客户沟通报价事宜</view>
					</view>
					<view class="office_myMisson_right">
						<view style="margin-right: 60rpx;">⚪进行中</view>
					</view>
				</li>
			</ul>

		</view>


		<view class="office_myPlan">
			<view class="office_myPlan_top">
				<view style="font-weight: 800;margin-top: 30rpx;">我的日程</view>
				<view style="padding-right: 40rpx;font-size: 36rpx;margin-top: 30rpx;">&gt;</view>
			</view>

			<ul class="office_myPlan_ul">
				<li class="office_myPlan_ul_li">
					<view class="office_myPlan_left">
						<view>11:00 - 12:00</view>
						<view>与客户沟通报价事宜</view>
					</view>
					<view class="office_myPlan_right">
						<view style="margin-right: 60rpx;">⚪进行中</view>
					</view>
				</li>

				<li class="office_myPlan_ul_li" style="border-left: 6rpx solid yellow;">
					<view class="office_myPlan_left">
						<view>11:00 - 12:00</view>
						<view>与客户沟通报价事宜</view>
					</view>
					<view class="office_myPlan_right">
						<view style="margin-right: 60rpx;">⚠已超时</view>
					</view>
				</li>

				<li class="office_myPlan_ul_li" style="border-left: 6rpx solid blue;">
					<view class="office_myPlan_left">
						<view>11:00 - 12:00</view>
						<view>与客户沟通报价事宜</view>
					</view>
					<view class="office_myPlan_right">
						<view style="margin-right: 60rpx;">⚠进行中</view>
					</view>
				</li>
			</ul>

		</view>


		<view class="office_myThrough">
			<view class="office_myThrough_top">
				<view style="font-weight: 800;margin-top: 30rpx;">待我审批</view>
				<view style="padding-right: 40rpx;font-size: 36rpx;margin-top: 30rpx;">&gt;</view>
			</view>

			<ul class="office_myThrough_ul">
				<li class="office_myThrough_ul_li">
					<view class="office_myThrough_left">
						<view> <text>订单编号:</text> <text>SJ20190324010001</text> </view>
						<view> <text>提交时间:</text> <text>2019-09-23 22:31</text> </view>
					</view>
					<view class="office_myThrough_right">
						<view style="margin-right: 60rpx;">回款审批</view>
					</view>
				</li>

				<li class="office_myThrough_ul_li" style="border-left: 6rpx solid yellow;">
					<view class="office_myThrough_left">
						<view>2019-09-23 22:31</view>
						<view>与客户沟通报价事宜</view>
					</view>
					<view class="office_myThrough_right">
						<view style="margin-right: 60rpx;">报销审批</view>
					</view>
				</li>

				<li class="office_myThrough_ul_li" style="border-left: 6rpx solid blue;">
					<view class="office_myThrough_left">
						<view>2019-09-23 22:31</view>
						<view>与客户沟通报价事宜</view>
					</view>
					<view class="office_myThrough_right">
						<view style="margin-right: 60rpx;">请假审批</view>
					</view>
				</li>
			</ul>

		</view>


	</view>
</template>

<script setup>
	const gooffice_search = () => {
		uni.navigateTo({
			url: "/pages/office_search/office_search"
		})
	}

	const gooffice_setup = () => {
		uni.navigateTo({
			url: "/pages/office_setup/office_setup"
		})
	}


	const gooffice_shenpi = () => {
		uni.navigateTo({
			url: "/pages/office_shenpi/office_shenpi"
		})
	}

	const gooffice_bangong = () => {
		uni.navigateTo({
			url: "/pages/office_bangong/office_bangong"
		})
	}

	const gooffice_gongdan = () => {
		uni.navigateTo({
			url: "/pages/office_gongdan/office_gongdan"
		})
	}

	const gooffice_renwu = () => {
		uni.navigateTo({
			url: "/pages/office_renwu/office_renwu"
		})
	}

	const gooffice_richeng = () => {
		uni.navigateTo({
			url: "/pages/office_richeng/office_richeng"
		})
	}

	const gooffice_gongzuo = () => {
		uni.navigateTo({
			url: "/pages/office_gongzuo/office_gongzuo"
		})
	}

	const gooffice_xitong = () => {
		uni.navigateTo({
			url: "/pages/office_xitong/office_xitong"
		})
	}

	const gooffice_waiqin = () => {
		uni.navigateTo({
			url: "/pages/office_waiqin/office_waiqin"
		})
	}

	const gooffice_wode = () => {
		uni.navigateTo({
			url: "/pages/office_wode/office_wode"
		})
	}

	const gooffice_wendang = () => {
		uni.navigateTo({
			url: "/pages/office_wendang/office_wendang"
		})
	}

	const gooffice_tongxunlu = () => {
		uni.navigateTo({
			url: "/pages/office_tongxunlu/office_tongxunlu"
		})
	}
</script>

<style scoped lang="scss">
	.office {
		font-size: 28rpx;
		overflow: hidden;
		background-color: rgb(241, 236, 236);
		padding: 20rpx;

		.office_top {
			padding: 0;
			background-color: #fff;
			display: flex;
			justify-content: space-between;

			.office_top_right {
				.office1 {
					width: 40rpx;
					height: 40rpx;
					margin-right: 60rpx;
				}

				.office2 {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.office_nav {
			margin-top: 40rpx;
			background-color: #fff;
			padding: 10rpx;
			border-radius: 20rpx;
			display: flex;
			flex-wrap: wrap;

			view {
				margin-top: 30rpx;
				width: 170rpx;
				text-align: center;
			}

			.office_nav_img {
				width: 100rpx;
				height: 100rpx;

			}
		}

		.office_myMisson {
			padding: 10rpx;
			margin-top: 40rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.office_myMisson_top {
				display: flex;
				justify-content: space-between;
			}

			.office_myMisson_ul {
				.office_myMisson_ul_li {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-left: 6rpx solid red;
					margin-top: 30rpx;
					background-color: rgb(252, 252, 252);

					.office_myMisson_left {
						margin-left: 20rpx;
					}
				}
			}
		}

		.office_myPlan {
			padding: 10rpx;
			margin-top: 40rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.office_myPlan_top {
				display: flex;
				justify-content: space-between;
			}

			.office_myPlan_ul {
				.office_myPlan_ul_li {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-left: 6rpx solid red;
					margin-top: 30rpx;
					background-color: rgb(252, 252, 252);

					.office_myPlan_left {
						margin-left: 20rpx;
					}
				}
			}
		}


		.office_myThrough {
			padding: 5px;
			margin-top: 20px;
			background-color: #fff;
			border-radius: 10px;

			.office_myThrough_top {
				display: flex;
				justify-content: space-between;
			}

			.office_myThrough_ul {
				.office_myThrough_ul_li {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-left: 3px solid red;
					margin-top: 15px;
					background-color: rgb(252, 252, 252);

					.office_myThrough_left {
						margin-left: 10px;
					}
				}
			}
		}


	}
</style>